<template>
  <div class="page">
    <div class="page-title">环保工程专业承包资质</div>

    <div class="page-content">
      <div class="page-content-screen">
        <div class="screen">
          
          <vc-filter :menus="screen">
            <template #search>
              <search-input :width="230" v-model="searchTxt" title="关键字" placeholder="请输入企业名称或资质证书号" @enter="handlerInput" @clear="handlerInput" />
            </template>
            <div class="total">共计<sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>条</div>
          </vc-filter>
        </div>

      </div>
      <div>
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalNum"
          :pageSize="PAGE_SIZE"
          v-model:pageNum="queryData.pageNum"
          :defaultSort="{ field: 'periodOfValidityStartDate1', order: 'desc' }"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import searchInput from '@/components/page-search/index.vue';
import { getProfessionalContracting } from '../apis';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { usePage } from '@/use/usePage';

const { PAGE_SIZE, queryData, screen } = useScreen();

const { loading, run } = useRequest(getProfessionalContracting, {
  defaultParams: [queryData],
  onSuccess: (data) => {
    tableData.value = data.values;
    totalNum.value = data.total;
  },
  onError: () => {
    tableData.value = [];
    totalNum.value = 0;
  }
});

const { columns } = useTable();
const { tableData, totalNum, searchTxt, handlerInput, handleCurrentChange } = usePage(queryData, run);

const sortChange = (event: any) => {
  const { column, order } = event;
  const { field } = column;
  if (field === 'periodOfValidityStartDate1' || field === 'periodOfValidityStartDate2') {
    const sortRule = order ? `periodOfValidityStartDate:${order}` : '';

    if(sortRule === queryData.sortRule){
      run({ ...queryData, sortRule });
    }else {
      queryData.sortRule = sortRule;
    }
  } else {
    queryData.sortRule = order ? `${field}:${order}` : '';
  }
};
</script>

<style lang="scss" scoped>
@import '../../sewagePermit/index.scss';
:deep(.revocation) {
  margin-left: 4px;
  padding: 3px 8px;
  color: #fff;
  cursor: pointer;
}
:deep(.revocation-true) {
  background-color: $tag-bgcolor-red;
}
:deep(.revocation-false) {
  background-color: $tag-bgcolor-green;
}
</style>
